<template>
	<div class="customerContetn">
    <customerInfo></customerInfo>
    <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="custBasicInfo"><custBasicInfo></custBasicInfo></el-tab-pane>
      <el-tab-pane label="价值信息" name="2" lazy><customerValueInfo></customerValueInfo></el-tab-pane>
      <el-tab-pane label="产品持有情况" name="3"><productInfo></productInfo></el-tab-pane>
      <el-tab-pane label="服务历史" name="4"><custHisInfo></custHisInfo></el-tab-pane>
      <el-tab-pane label="营销商机" name="5"><businessInfo></businessInfo></el-tab-pane>
      <el-tab-pane label="业务分析" name="6"><yearAnalyze></yearAnalyze></el-tab-pane>
    </el-tabs>
	</div>
</template>

<script setup lang="ts">


// 引入组件
const customerInfo = defineAsyncComponent(() => import('./component/customerInfo.vue'));
const custBasicInfo = defineAsyncComponent(() => import('./component/custBasicInfo.vue'));
const customerValueInfo = defineAsyncComponent(() => import('./component/customerValueInfo.vue'));
const productInfo = defineAsyncComponent(() => import('./component/productInfo.vue'));
const custHisInfo = defineAsyncComponent(() => import('./component/custHisInfo.vue'));
const businessInfo = defineAsyncComponent(() => import('./component/businessInfo.vue'));
const yearAnalyze = defineAsyncComponent(() => import('./component/yearAnalyze.vue'));

const activeName = ref('custBasicInfo')

</script>
<style scoped lang="scss">
  .customerContetn{
    padding: 20px;
    background-color: rgb(240, 241, 243);
    overflow: auto;
    height: 100vh;
  }
  .tabs{
    background: rgb(255, 255, 255);
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0 10px;
  }
</style>